<script setup>
import * as Cesium from 'cesium'
import { onMounted, defineExpose } from 'vue'
import MapViewer from '@/utils/cesium/index.js'

let mapViewer = null
onMounted(() => {
  mapViewer = new MapViewer('cesium-container', {
    original: [63, 2, 132, 56]
  })
  mapViewer.reset()
  mapViewer.zoomIn()
})
// 地图放大
const zoomInFunc = () => {
  mapViewer.zoomIn()
}
// 地图缩小
const zoomOutFunc = () => {
  mapViewer.zoomOut()
}
// 地图重置
const resetFunc = () => {
  mapViewer.reset()
}
// 二三维切换
const switchDimensionalFunc = () => {
  mapViewer.switchDimensional()
}
// 导出地图为图片
const exportMapFunc = () => {
  mapViewer.exportMap()
}
// 测量距离
const addMeasureDistanceFunc = (measureDistanceChecked) => {
  mapViewer.addMeasureDistance(measureDistanceChecked)
}
// 测量面积
const addMeasureAreaFunc = (measureAreaChecked) => {
  mapViewer.addMeasureArea(measureAreaChecked)
}
// 测量高程
const addMeasureHeightFunc = (measureHeightChecked) => {
  mapViewer.addMeasureHeight(measureHeightChecked)
}
// 更换为影像图
const toggleImageryLayerFunc = () => {
  mapViewer.toggleImageryLayer()
}
// 更换为地形图
const toggleTerrainLayerFunc = () => {
  mapViewer.toggleTerrainLayer()
}
// 更换为矢量图
const toggleVectorLayerFunc = () => {
  mapViewer.toggleVectorLayer()
}
// 地球自转
const enableEarthRotationFunc = () => {
  mapViewer.enableEarthRotation()
}
// 开启雾天
const enableFoggyTurnFunc = () => {
  mapViewer.enableFoggyTurn()
}
// 开启昼夜
const enableDayNightTurnFunc = () => {
  mapViewer.enableDayNightTurn()
}
// 开启大气层
const enableAtmosphereTurnFunc = () => {
  mapViewer.enableAtmosphereTurn()
}
// 开启地形
const enableTerrainLoadFunc = () => {
  mapViewer.enableTerrainLoad()
}
// 添加中国省份
const addChinaProvincesFunc = () => {
  mapViewer.addChinaProvinces()
}
// 卷帘分析
const addRollerShutterFunc = (RollerShutterChecked) => {
  mapViewer.addRollerShutter(RollerShutterChecked)
}
// 卷帘分析 + 分割按钮
const addRollerShutterClipFunc = (RollerShutterClipChecked) => {
  mapViewer.addRollerShutterClip(RollerShutterClipChecked)
}
// 绘画工具
const addDrawUtilFunc = (type, div) => {
  mapViewer.addDrawUtil(type, div)
}
// 鹰眼控件
const addOverViewFunc = (overViewChecked, type) => {
  mapViewer.addOverView(overViewChecked, type)
}
// 添加剖面分析
const addProfileAnalysisFunc = (profileAnalysisChecked, div) => {
  mapViewer.addProfileAnalysis(profileAnalysisChecked, div)
}
// 添加淹没分析
const addInundationAnalysisFunc = (inundationAnalysisChecked, div) => {
  mapViewer.addInundationAnalysis(inundationAnalysisChecked, div)
}
// 添加空间几何
const addGeometriesFunc = (type) => {
  mapViewer.addGeometries(type)
}
// 添加3DTiles模型
const load3DTileSetFunc = (load3DTileSetChecked) => {
  mapViewer.load3DTileSet(load3DTileSetChecked)
}
// 添加GLB模型
const loadgltfAirPortFunc = (loadgltfAirChecked) => {
  mapViewer.loadgltfAir(loadgltfAirChecked)
}
// 添加辐射圈
const addRadiationPatternFunc = (radiationPatternChecked) => {
  mapViewer.addRadiationPattern(radiationPatternChecked)
}
// 添加动态墙
const addDynamicWallsFunc = (dynamicWallsChecked) => {
  mapViewer.addDynamicWalls(dynamicWallsChecked)
}
// 添加GIF动图
const addGIFMoveFunc = (gIFMoveChecked) => {
  mapViewer.addGIFMove(gIFMoveChecked)
}
// 添加风场
const addWindyFarmsFunc = (windyFarmsChecked) => {
  mapViewer.addWindyFarms(windyFarmsChecked)
}
// 添加圆扩散
const addCircularDiffusionFunc = (circularDiffusionChecked) => {
  mapViewer.addCircularDiffusion(circularDiffusionChecked)
}
// 添加飞线效果
const addFlyingLineFunc = (flyingLineChecked) => {
  mapViewer.addFlyingLine(flyingLineChecked)
}
// 添加四色图
const addFourColorMapFunc = (fourColorMapChecked) => {
  mapViewer.addFourColorMap(fourColorMapChecked)
}
// 添加流动水图
const addFlowingWaterFunc = (flowingWaterChecked) => {
  mapViewer.addFlowingWater(flowingWaterChecked)
}
// 添加火焰粒子
const addFireParticesFunc = (fireParticesChecked) => {
  mapViewer.addFirePartices(fireParticesChecked)
}
// 添加大雾粒子
const addFogParticlesFunc = (fogParticlesChecked) => {
  mapViewer.addFogParticles(fogParticlesChecked)
}
// 添加下雨效果
const addRainEffectFunc = (rainEffectChecked) => {
  mapViewer.addRainEffect(rainEffectChecked)
}
// 添加雪花效果
const addSnowFlakeEffectFunc = (snowFlakeEffectChecked) => {
  mapViewer.addSnowFlakeEffect(snowFlakeEffectChecked)
}
// 通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性
defineExpose({
  zoomInFunc,
  zoomOutFunc,
  resetFunc,
  switchDimensionalFunc,
  exportMapFunc,
  addMeasureDistanceFunc,
  addMeasureAreaFunc,
  addMeasureHeightFunc,
  toggleImageryLayerFunc,
  toggleTerrainLayerFunc,
  toggleVectorLayerFunc,
  enableEarthRotationFunc,
  enableFoggyTurnFunc,
  enableDayNightTurnFunc,
  enableAtmosphereTurnFunc,
  enableTerrainLoadFunc,
  addChinaProvincesFunc,
  addRollerShutterFunc,
  addRollerShutterClipFunc,
  addDrawUtilFunc,
  addOverViewFunc,
  addProfileAnalysisFunc,
  addInundationAnalysisFunc,
  addGeometriesFunc,
  load3DTileSetFunc,
  loadgltfAirPortFunc,
  addRadiationPatternFunc,
  addDynamicWallsFunc,
  addGIFMoveFunc,
  addWindyFarmsFunc,
  addCircularDiffusionFunc,
  addFlyingLineFunc,
  addFourColorMapFunc,
  addFlowingWaterFunc,
  addFireParticesFunc,
  addFogParticlesFunc,
  addRainEffectFunc,
  addSnowFlakeEffectFunc
})
</script>

<template>
  <div class="cesium-main">
    <div id="cesium-container"></div>
  </div>
</template>

<style lang="scss">
.cesium-main {
  width: 100%;
  height: 100%;
  background-color: red;

  #cesium-container {
    width: 100%;
    height: 100%;

    .cesium-viewer-bottom {
      visibility: hidden;
    }
  }
}
</style>
